@extends('layouts.wechat.application')

@section('content')
    <div class="page-index" id="home" data-log="首页">
        <div class="index-header">
            <div class="search_bar">
                <a href="/search">
                    <span class="icon icon-search"></span>
                    <span class="text">搜索商品名称</span>
                </a>
            </div>
            <div class="search_bottom"></div>
        </div>

        <!--焦点图-->
        <section class="slider">
            <div class="flexslider">
                <ul class="slides">

                    @foreach($sliders as $slider)
                        <li>
                            <a href="{{$slider->url}}"><img src="{{$slider->thumb}}"/></a>
                        </li>
                    @endforeach

                </ul>
            </div>
        </section>

        <!--推荐商品-->
        <div class="list">
            <div class="section">
                <div class="mcells_auto_fill">
                    <div class="body">

                        @foreach($banners as $banner)
                            <div>
                                <div class="items">
                                    <a href="{{$banner->url}}"><img src="{{$banner->thumb}}"></a>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
            </div>

            @foreach($products as $product)
                <div class="section product_num"
                     onclick="location.href='/product/show?id={{$product->id}}'">
                    <div class="item">
                        <div class="img">
                            <img class="ico" src="{{$product->thumb}}">

                            @if($product->is_new == 1)
                                <img class="tag" src="/wechat/assets/img/new.png">
                            @elseif($product->is_hot == 1)
                                <img class="tag" src="/wechat/assets/img/hot.png">
                            @endif

                        </div>
                        <div class="info">
                            <div class="name"><p>{{$product->name}}</p></div>
                            <div class="brief"><p>{{$product->description}}</p></div>
                            <div class="price"><p>{{$product->price}}元 起</p></div>
                        </div>
                    </div>
                </div>
            @endforeach

            <div class="loadEffect" style="display: none">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>

            @include('layouts.wechat._footer')

        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript">
        $(function () {
            $(window).scroll(function () {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(this).height();
                if (scrollTop + windowHeight == scrollHeight) {
                    // 此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作

                    //获取当前页面商品条数
                    var nStart = $('.product_num').length;
                    //当显示条数和总条数相等
                    if (nStart >= "{{$total}}") {
                        $('.loadEffect').show().text("没有更多了亲！！！");

                        return false;
                    } else {
                        $('.loadEffect').show();
                        $.ajax({
                            type: 'POST',
                            url: '/scroll',
                            data: {start: nStart},
                            success: function (data) {
                                $('.loadEffect').hide();
                                $.each(data, function (i, item) {
                                    var img = "";
                                    if (item.is_new == 1) {
                                        img = '<img class="tag" src="/wechat/assets/img/new.png">';
                                    }

                                    if (item.is_hot == 1) {
                                        img = '<img class="tag" src="/wechat/assets/img/hot.png">';
                                    }

                                    $('.loadEffect').before('<div class="section product_num" onclick="location.href=\'/product/show/?id=' + item.id + '\'">' +
                                        '<div class="item">' +
                                        '<div class="img">' +
                                        '<img class="ico" src="' + item.thumb + '">' + img +
                                        '</div>' +
                                        '<div class="info">' +
                                        '<div class="name"><p>'+item.name+'</p></div>' +
                                        '<div class="brief"><p>'+item.description+'</p></div>' +
                                        '<div class="price"><p>'+item.price+'元 起</p></div>' +
                                        '</div>' +
                                        '</div>' +
                                        '</div>');
                                });
                            }
                        });
                    }
                }
                return false;
            });
        })

        //                $(window).scroll(function () {
        //                    var scrollTop = $(this).scrollTop();
        //                    var scrollHeight = $(document).height();
        //                    var windowHeight = $(this).height();
        //                    if (scrollTop + windowHeight == scrollHeight) {
        //
        //                        //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
        //                        var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
        //                        redgiftList(page);
        //                        $("#redgiftNextPage").attr('currentpage', page + 1);
        //
        //                    }
        //                })

    </script>
@endsection
